<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" th:href="@{css/CustomForm.css}">
    <!--/*@thymesVar id="SimpleUser" type="cn.org.y24.EmploySystem.entity.SimpleUser"*/-->
    <title th:text="${SimpleUser.username}"></title>
</head>
<body>
</div>
<!--/*@thymesVar id="SimpleUser" type="cn.org.y24.EmploySystem.entity.SimpleUser"*/-->
<div class="topDiv">
    <header style="background: #0f6674;border-radius: 10px;">
        <div>
            <h1 th:id="infoID" th:text="${'Graduate user '+SimpleUser.username}"></h1>
        </div>
        <h1>Welcome to the Information Center!</h1>
        <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
        <p th:text="${GraduateUserAdditionalInfo != null?'Additional information is logged. you can modify it now.' :'Additional information is not logged. you can add it now.'}">
        </p>
    </header>
    <section>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Password Management</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="oldPassword" class="customLabel" id="oldPasswordLabel">
                        Old password
                    </label>
                    <input type="password" id="oldPassword" class="customInput" name="oldPassword" required
                           placeholder="Old password">
                </p>
                <p>
                    <label for="newPassword" class="customLabel" id="passwordLabel">
                        Change password
                    </label>
                    <input type="password" id="newPassword" class="customInput" name="password" required
                           placeholder="new password">
                </p>
                <p>
                    <label for="confirmPassword" class="customLabel" id="confirmPasswordLabel">
                        Confirm password
                    </label>
                    <label for="confirmPassword"></label>
                    <input type="password" id="confirmPassword"
                           class="customInput" required
                           placeholder="confirm password">
                </p>
                <button id="passwordResetButton" class="formButton">Reset</button>
                <button id="passwordSubmitButton" class="formButton">Submit</button>
                <div class="divideLine"></div>
                <span id="passwordResult"></span>
            </div>
        </div>
        <div class="DIV">
            <div class="CustomDiv">
                <h1>Information Management</h1>
                <div class="divideLine"></div>
                <p>
                    <label for="idCardNo" class="customLabel" id="idLabel">
                        idCardNo
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="idCardNo" class="customInput" name="idCardNo"
                           th:disabled="${GraduateUserAdditionalInfo != null?'true' :'false'}"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'idCardNo':GraduateUserAdditionalInfo.idCardNo}">
                </p>
                <p>
                    <label for="name" class="customLabel" id="nameLabel">
                        name
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="name"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'name':GraduateUserAdditionalInfo.name}">
                </p>
                <p>
                    <label for="schoolNo" class="customLabel" id="schoolNoLabel">
                        schoolNo
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="schoolNo"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'schoolNo':GraduateUserAdditionalInfo.schoolNo}">
                </p>
                <p>
                    <label for="contractNo" class="customLabel" id="contractNoLabel">
                        Contract No
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="contractNo" class="customInput" name="contractNo"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'contractNo':GraduateUserAdditionalInfo.contractNo}">
                </p>
                <p>
                    <label for="emailAddress" class="customLabel" id="emailAddressLabel">
                        Email address
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="emailAddress"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'Email address':GraduateUserAdditionalInfo.emailAddress}">
                </p>
                <p>
                    <label for="othersReferralStuffID" class="customLabel" id="othersReferralStuffIDLabel">
                        othersReferralStuffID
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="othersReferralStuffID"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'othersReferralStuffID':GraduateUserAdditionalInfo.othersReferralStuffID}">
                </p>
                <p>
                    <label for="selfReferralStuffID" class="customLabel" id="selfReferralStuffIDLabel">
                        selfReferralStuffID
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="selfReferralStuffID"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'selfReferralStuffID':GraduateUserAdditionalInfo.selfReferralStuffID}">
                </p>
                <p>
                    <label for="school" class="customLabel" id="schoolLabel">
                        school
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="school"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'school':GraduateUserAdditionalInfo.school}">
                </p>
                <p>
                    <label for="sex" class="customLabel" id="sexLabel" >
                        sex Ps : male|female
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <br>
                    <input type="text" id="sex"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'sex':(GraduateUserAdditionalInfo.sex ?'male':'female')}">
                </p>
                <p>
                    <label for="national" class="customLabel" id="nationalLabel">
                        national
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="national"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'national':GraduateUserAdditionalInfo.national}">
                </p>
                <p>
                    <label for="degree" class="customLabel" id="degreeLabel">
                        degree
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="degree"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'degree':GraduateUserAdditionalInfo.degree}">
                </p>
                <p>
                    <label for="politicalLandscape" class="customLabel" id="politicalLandscapeLabel">
                        politicalLandscape
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="politicalLandscape"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'politicalLandscape':GraduateUserAdditionalInfo.politicalLandscape}">
                </p>
                <p>
                    <label for="address" class="customLabel" id="addressLabel">
                        address
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="address"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'address':GraduateUserAdditionalInfo.address}">
                </p>
                <p>
                    <label for="householdRegistration" class="customLabel" id="householdRegistrationLabel">
                        householdRegistration
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="householdRegistration"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'householdRegistration':GraduateUserAdditionalInfo.householdRegistration}">
                </p>
                <p>
                    <label for="maritalStatus" class="customLabel" id="maritalStatusLabel">
                        maritalStatus
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="maritalStatus"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'maritalStatus':GraduateUserAdditionalInfo.maritalStatus}">
                </p>
                <p>
                    <label for="schoolLeftTime" class="customLabel" id="schoolLeftTimeLabel">
                        schoolLeftTime Ps: YYYY-MM-DD HH:MM:SS
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <input type="text" id="schoolLeftTime"
                           class="customInput"
                           th:placeholder="${GraduateUserAdditionalInfo == null?'schoolLeftTime':GraduateUserAdditionalInfo.schoolLeftTime}">
                </p>
                <p>
                    <label for="schoolLeftInfo" class="customLabel" id="schoolLeftInfoLabel">
                        schoolLeftInfo
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <textarea type="text" id="schoolLeftInfo"
                              class="customInput"
                              th:placeholder="${GraduateUserAdditionalInfo == null?'schoolLeftInfo':GraduateUserAdditionalInfo.schoolLeftInfo}"></textarea>
                </p>
                <p>
                    <label for="trainInfo" class="customLabel" id="trainInfoLabel">
                        trainInfo
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <textarea type="text" id="trainInfo"
                              class="customInput"
                              th:placeholder="${GraduateUserAdditionalInfo == null?'trainInfo':GraduateUserAdditionalInfo.trainInfo}"></textarea>
                </p>
                <p>
                    <label for="practiceExperience" class="customLabel" id="practiceExperienceLabel">
                        practiceExperience
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <textarea type="text" id="practiceExperience"
                              class="customInput"
                              th:placeholder="${GraduateUserAdditionalInfo == null?'practiceExperience':GraduateUserAdditionalInfo.practiceExperience}"></textarea>
                </p>
                <p>
                    <label for="resume" class="customLabel" id="resumeLabel">
                        resume
                    </label>
                    <!--/*@thymesVar id="GraduateUserAdditionalInfo" type="cn.org.y24.EmploySystem.entity.sql.GraduateUserAdditionalInfo"*/-->
                    <textarea type="text" id="resume"
                              class="customInput"
                              th:placeholder="${GraduateUserAdditionalInfo == null?'resume':GraduateUserAdditionalInfo.resume}"></textarea>
                </p>
                <button id="infoResetButton" class="formButton">Reset</button>
                <button id="infoSubmitButton" class="formButton">Submit</button>
                <div class="divideLine"></div>
                <span id="infoResult"></span>
            </div>
        </div>
    </section>
</div>
</body>
<script>
    $(function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $(document).ajaxSend(function (e, xhr, options) {
            xhr.setRequestHeader(header, token);
        });
        $("#infoResetButton").click(function () {
            $("div.DIV:last input.customInput,textarea.customInput").val("")
        })
        $("#infoSubmitButton").click(function () {
            let inputArray = $("div.DIV:last input.customInput,textarea.customInput")
            if (inputArray.toArray().some((e) => e.value !== "")) {
                $.post("/graduateInfoModifier", {
                        info: inputArray.toArray().map((e) => e.value ? e.value : e.placeholder).toString()
                    }, function (data, status, jqXHR) {
                        if (data) {
                            if (data.toString() === "true") {
                                $("#infoResult").html("<span style='color: green'>Modification succeeded!</span>");

                            } else if (data.toString() === "505") {
                                $("#infoResult").html("<span style='color: red'>Inner bug raised</span>");
                            }
                        }
                    }
                );
            } else {
                $("#infoResult").html("<span style='color: green'>Nothing need to change</span>");
            }
        })
    });
</script>
<script th:src="@{js/passwordModifier.js}"></script>
</html>